import React, { useContext, useState } from "react";
import { SyncOutlined, LogoutOutlined } from "@ant-design/icons"; import { useNavigate } from "react-router-dom";
import { ClientContext } from "../../App";
import { Layout, Space, Tag, Button, Tooltip } from "antd";
import { jointMessage } from '../../tools/message'

const { Header } = Layout;

export const Head: React.FC = () => {
  const { client, theme } = useContext(ClientContext);

  const navigate = useNavigate();

  const token = client.getToken();
  const [show, changeShow] = useState<string>(token);

  const logout = async () => {
    const { changeMsg } = client.getProps();

    const { code, message, data: info } = await (
      await client.post("/api/logout", { token })
    ).data;

    if (code == 0) {
      client.removeToken();
      navigate("/")
      changeShow("");
    } else {
      const reason = jointMessage(message, info.reason)
      changeMsg(reason)
    }
  };

  return (
    <Header style={{ display: "flex", alignItems: "center", backgroundColor: "#537895" }}>
      <div />
      <Space size={[0, 100]} wrap>
        <Tag
          style={{ fontSize: "18px", color: "black", backgroundColor: "white" }}
          icon={<SyncOutlined spin />}
          color="processing"
          bordered = {false}
        >
          人脸识别管理系统
        </Tag>
      </Space>
      <span style={{ paddingLeft: "80%" }} />
      <Tooltip title="清除用户cookie并退出登陆">
        <span style={{ right: "20%" }}>
          {show != "" ? (
            <Button icon={<LogoutOutlined />} onClick={logout}>
              退出登陆
            </Button>
          ) : null}
        </span>
      </Tooltip>
     
    </Header>
  );
};
